<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*
        a.borderColor{
            border: 1px solid red;
        }
        div p{
            border: 1px solid rgb(0, 81, 255);
        }
        .contentBox,.borderBox{
            width: 200px;
            height: 200px;
            padding: 50px;
        }
        .contentBox{
            border: 1px solid red;
            overflow: hidden;
            outline: 1px solid blue;
            margin: 0px auto 50px;
        }
        .borderBox{
            margin-top: 50px;
            border: 1px solid yellow
        }
        */
        .selected{
            border:1px solid red;
            background-color:yellow
        }
    </style>

    <script>
        // var b = null;
        function cssSelect(){
            // if (b != null) {
            //     let nodes = document.querySelectorAll(b);
            //     Array.from(nodes).forEach((item) => {
            //         item.style.cssText = "clear";
            //     })
            // }
            let cssText1 = document.querySelector("#cssSelector").value; // 获取输入的值
            let mainTag = document.getElementsByTagName("main")[0]; // 选择main标签下的标签进行操作
            let nodes = mainTag.querySelectorAll(cssText1); // 根据输入的值，选择标签
            let deleteNodes = document.querySelectorAll("[class~=selected]"); // 获取已经选中的标签，要删除这些，要重新选择别的
            Array.from(deleteNodes).forEach(item=>{ // 循环删除这些标签
                item.classList.remove("selected");
            });

            // 效率低点
            // let allNodes = document.querySelectorAll("*"); // 选择全部标签
            // Array.from(allNodes).    // 根据过滤器选择那些已经被选中的，然后删除他
            //     filter(item=>item.classList.contains("selected")).
            //     forEach(item=>item.classList.remove("selected"));
            Array.from(nodes).forEach((item)=>{ // 循环添加最新的选择的
                item.classList.add("selected");
            })
            // b = cssText1;
        }

        function init(){
            document.getElementById("cssButton").addEventListener("click",cssSelect,false); // 等button按钮点击，执行cssSelect方法
        }
        window.addEventListener("load",init,false); // 加载页面时，按执行顺序，执行这个语句，等页面DOM加载完，执行init方法

    </script>
</head>
<body>
    CSS Selector Test
    <section>
        <input type="search" id="cssSelector">
        <button id="cssButton">搜索</button>
    </section>
    <main>
        <input type="text">
        <img id="logo" class="borderColor" src="../img/2.jpg" alt="logo">
        <div>我是一个块级标签</div>
        <img hidden id="test" src="../img/3.jpg">
        <a class="borderColor" href="../index.html">我是一个链接</a>
        <div>
            <p>我是div标签里的p</p>
            <a href="#">我是div标签里的a</a>
        </div>
        <section>
            <h2>盒子属性</h2>
            <div class="contentBox" style="box-sizing: content-box">
                contextBoxcontextBoxcontextBoxcontextBoxcontextBoxcontextBoxcontextBox
            </div>
            <div class="borderBox" style="box-sizing: border-box">
                IEBox
            </div>
        </section>
        <div style="border:1px solid red;width:100px">
            <div id="div1" style="margin-top:50px;background-color:green;height:50px;width:50px;">
                <div id="div2" style="margin-top:100px;">B</div>
            </div>
        </div>
        <ol style="padding-left: 0px;list-style-position: inside;list-style-type: circle">
            <li>白姐姐</li>
            <li>小颜</li>
            <li>任小冲</li>
        </ol>
    </main>   

</body>
</html>